<template>
  <block>
    <view class="modal-mask" :class="{ visible }" :style="{ 'z-index': zIndex }" @click.stop="onMaskClick"
      @touchmove.stop.prevent="onTouchMove" />
    <view class="modal" :class="[{ visible }, position]" :style="{ 'z-index': zIndex + 1 }"
      @touchmove.stop.prevent="onTouchMove">
      <slot />
    </view>
  </block>
</template>


<script>
export default {
  props: {
    // modal是否显示
    visible: {
      type: Boolean,
      default: false,
    },
    // modal位置 center(默认) | bottom | left | right
    position: {
      type: String,
      default: 'center',
    },
    // modal层级, 默认2000
    zIndex: {
      type: Number,
      default: 999999,
    }
  },
  methods: {
    onMaskClick() {
      this.$emit("onMaskClick")
    },
    onTouchMove() {
      /**
       * DO NOTHNG
       * 用作阻止滚动穿透
       */
      return
    }
  }
}
</script>


<style lang="scss">
$transition: all .2s ease-in-out;

.modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .7);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: $transition;

  &.visible {
    opacity: 1;
    visibility: visible;
  }
}

.modal {
  position: fixed;
  z-index: 2001;
  opacity: 0;
  visibility: hidden;
  transform-origin: center;
  transition: $transition;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &.visible {
    opacity: 1;
    visibility: visible;
  }

  &.center {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);

    &.visible {
      transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
    }
  }

  &.bottom {
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 100%, 0);

    &.visible {
      transform: translate3d(-50%, 0, 0);
    }
  }

  &.right {
    top: 50%;
    right: 0;
    transform: translate3d(50%, -50%, 0);

    &.visible {
      transform: translate3d(0, -50%, 0);
    }
  }

  &.left {
    top: 50%;
    left: 0;
    transform: translate3d(-50%, -50%, 0);

    &.visible {
      transform: translate3d(0, -50%, 0);
    }
  }

}
</style>
